<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <meta charset="UTF-8">
    <title>工艺</title>
    <link href="../static/dist/semantic.min.css" th:href="@{/dist/semantic.min.css}" rel="stylesheet">
    <link href="../static/css/index.css" th:href="@{/css/index.css}" rel="stylesheet">
    <link rel="stylesheet" href="../static/css/layui.css" th:href="@{/css/layui.css}">
    <link href="../static/css/public.css" th:href="@{/css/public.css}" rel="stylesheet">
    <link rel="stylesheet" href="../static/css/notiflix.min.css" th:href="@{/css/notiflix.min.css}">
    <!--    <link rel="stylesheet" href="//apps.bdimg.com/libs/jqueryui/1.10.4/css/jquery-ui.min.css">-->

    <!--    <link href="../static/css/simplePagination.css" th:href="@{/css/simplePagination.css}" rel="stylesheet">-->
    <style>
        tr {
            text-align: center;
        }

        #make-template {
            height: 80%;
            width: 100%;
        }

        #child-template {
            margin-top: 100px;
            float: right;
            width: 400px;
            height: 600px;
        }

        #child-template div.item {
            float: left;
            margin-top: 6px;
        }

        .draggable {
            display: flex;
            float: left;
            background: red;
        }


        .draggable:hover {
            cursor: pointer;
        }

        i.close.icon:hover {
            cursor: pointer;
            color: #9f3a38;
        }

        #add-template {
            width: 39vw;
            float: left;
            margin-top: 7.29vw;
            margin-left: 15.625vw;
            height: 26.041vw;
        }

        #sortable {
            height: 15.625vw;
            border: #4f969c solid 1px;
            box-shadow: rgb(165 135 135/87%) 0 0 10px inset;
        }

        #sortable div.item {
            float: left;
            margin-top: 10px;
            margin-left: 10px;
        }

        #child-template div span {
            color: #0C0C0C
        }

        #template-management {
            margin-top: 15px;
        }

        #template-management thead th {
            background-color: #2a3538;
            color: white;
        }

        #template-management tbody a {
            margin-right: 30px;
        }

        .end {
            pointer-events: none;
        }

        #preview-two-template {
            position: absolute;
            margin-top: 10px;
            margin-left: 77px;
            width: 750px;
            height: 100px;
        }

        .description {
            color: #9f3a38;
            display: inline-block;
            text-indent: 1.5em;
        }

        .red {
            background-color: red;
            display: block;
        }

        .green {
            background-color: green;
            display: block;
        }

        #reload{
            position: fixed;
            right: 30px;
            bottom: 40vh;
            width: 40px;
            height: 40px;
            background-image: url('/image/reload.png');
            background-repeat: no-repeat;
            background-size: cover;
            cursor: pointer;
        }
    </style>
</head>
<body>
<nav class="ui inverted  attached  segment m-padded-tb-mini m-shadow-small">
    <div class="ui inverted secondary stackable menu" style="width: 93.7% !important;">
        <h2 class="ui teal header item" style="margin-left: 5.2%;font: italic 2em Georgia, serif;">Time-varying</h2>
        <a th:href="@{/index/none/main}" class="m-item item m-mobile-hide"><i class="edit  icon"> </i>生产计划</a>
        <a class="item head-item show-description"><i class="magic icon"> </i>工艺</a>
        <a class="item head-item show-template"><i class="eye icon"></i>预览模板</a>
        <a class="item head-item add-template"><i class="snowflake icon"></i>添加模板</a>
        <a class="item head-item template-management"><i class="cogs icon"></i>模板管理</a>
        <a href="javascript:void(0)" id="admin" class="m-item item m-mobile-hide admin"><i
                class="object ungroup outline icon"> </i>管理员</a>
        <a href="javascript:void(0)" id="hours" class="m-item item m-mobile-hide admin"><i
                class="street view icon"> </i>工时管理</a>
        <div class="right m-item m-mobile-hide menu">
            <div class="ui dropdown item">
                <div class="text">
                    <img class="ui avatar image" src="../static/image/test.jpg" th:src="@{/image/test.jpg}">
                    Hi~ <span id="real-name"></span>
                </div>
                <i class="dropdown icon"></i>
                <div class="menu">
                    <a href="#" th:href="@{/logout}" class="item">注销</a>
                </div>
            </div>
        </div>
    </div>
</nav>
<div class="ui container">
    <div class="ui piled segment" id="craft-description" style="margin-top: 80px;">
        <h4 class="ui header">工艺员工须知</h4>
        <p>
        <h5 class="ui header">1、模板预览</h5>
        <span class="description">可预览范围包括已经批准使用模板和未批准模板</span>
        </p>
        <p>
        <h5 class="ui header">2、模板添加</h5>

        <span class="description">
              <h5 class="ui header">2.1工步模板:</h5>
              工步模板添加分为两步填写工步名称，填写工步英文别称. 例:(工步名称："备注" | 字段名称："remarks") 建议遵循驼峰命名例：(软件烧录:softwareBurning)，不可添加重复工步<br/>
            千万注意！！！ 批注 数据 字段名称 必须以 long开始 例子 工步名称：第一次  字段名称：longFirst
          </span>

        <span class="description" style="margin-top: 14px;">
              <h5 class="ui header">2.2工序模板:</h5>
              添加工序模板分为两步，填写工序模板名称，选择右侧工步。工序模板顺序即为添加模板框排列顺序从左到右排列,切勿添加重复工步！
          </span>

        <span class="description" style="margin-top: 14px;">
              <h5 class="ui header">2.3流工单模板:</h5>
              添加流工单模板分为三步，填写流工单名称，填写数据表名例:(product_testing_table)，注意这两项都不可以重复。最后添加右侧工序模板即可，顺序从左至右排列。
                流工单别名请务必遵循 _table 结尾
          </span>
        </p>
        <p>
        <h5 class="ui header">3、模板绑定</h5>
        <span class="description">
              <h5 class="ui header">3.1产品编码绑定模板:</h5>
               填写产品编码，选择流工单模板即可，不可重复绑定。一个产品编码可绑定多个流工单模板
          </span>

        <span class="description" style="margin-top: 14px;">
              <h5 class="ui header">3.2返修工单绑定模板:</h5>
              选择返修工单，选择要绑定的流工单模板。一个返修工单只能绑定一个流工单模板,切勿重复添加！
          </span>

        <span class="description" style="margin-top: 14px;">
              <h5 class="ui header">3.3产品编码更新绑定:</h5>
              更改产品编码绑定的流工单模板，选择产品编码，选择已经绑定的流工单模板，再选择新的流工单模板.
          </span>
        </p>
        <p>
        <h5 class="ui header">4、模板删除</h5>
        <span class="description">
              <h5 class="ui header">4.1工步模板删除:</h5>
              选择工步模板，删除即可。此下拉列表是已经筛选过的工步模板
          </span>
        <br>
        <span class="description" style="margin-top: 14px;">
              <h5 class="ui header">4.2工序模板删除:</h5>
              选择工序模板，删除即可。此下拉列表是已经筛选过的工序模板
          </span>
        <br>
        <span class="description" style="margin-top: 14px;">
              <h5 class="ui header">4.3流工单模板删除:</h5>
              此操作由工艺主管操作。
          </span>
        </p>

    </div>
</div>
<div class="m-padded-lr hide" id="template-show">
    <div class="ui container m-container"
         style="width: 100%!important;float: right !important;">
        <div class="ui top attached">
            <div class="ui  horizontal link list">
                <div class="item" style="margin-top: 20px;margin-left: 50px;">
                    <div class="ui search selection dropdown" style="float: right;margin-right: 10px;margin-top: 15px;">
                        <input name="template" id="template" type="hidden">
                        <div class="default text" data-value="0">请选择模板</div>
                        <i class="dropdown icon"></i>
                        <div class="menu" id="template-one-menu">
                        </div>
                    </div>
                </div>
                <div class="item">
                    <div style="width: 15px;height: 15px;border-radius: 15px;" id="template-light"></div>
                    <div>
                        <span id="template-status" style="color: black">

                        </span>
                    </div>
                </div>
            </div>
        </div>
        <div class="ui attached">
            <table class="ui striped celled table" id="table1">
                <thead>
                <tr>

                </tr>
                <tr>

                </tr>
                <tr>

                </tr>
                </thead>
            </table>
            <p>已绑定产品编码:<span id="codes"></span></p>
        </div>

    </div>
</div>

<div class="hide" id="make-template">
    <div class="ui vertical menu m-container-mini"
         style="width: 5%;!important;font-size: 1.2em;float: left;margin-top: 150px;">
        <div class="item">
            <div class="ui teal header">工艺</div>
            <div class="menu">
                <a class="item left-item leave-three-template" data-tooltip="添加工步名称"
                   data-position="right center">添加工步名称</a>
                <a class="item left-item leave-two-template" data-tooltip="新建工序模板"
                   data-position="right center">新建工序模板</a>
                <a class="item left-item leave-one-template" data-tooltip="新建流工单模板"
                   data-position="right center">新建流工单模板</a>
            </div>
        </div>
        <div class="item">
            <div class="ui teal header">绑定</div>
            <div class="menu">
                <div class="ui dropdown item">
                    模板绑定
                    <i class="dropdown icon"></i>
                    <div class="menu">
                        <a class="item left-item bind-template"><i class="paperclip icon"></i>流工单模板绑定</a>
                        <a class="item left-item" id="rework-work-bind"><i class="camera retro icon"></i>返修工单模板绑定</a>
                        <a class="item left-item" id="update-bind"><i class="bullseye icon"></i>修改产品编码模板</a>
                        <a class="item left-item" id="contact-binding"><i class="flag checkered icon"></i>解除绑定</a>
                        <a class="item left-item" id="rework-update-binding"><i class="futbol icon"></i>修改返修工单模板</a>
                    </div>
                </div>
            </div>
        </div>
        <div class="item">
            <div class="ui teal header">模板删除</div>
            <div class="menu">
                <div class="ui dropdown item">
                    模板删除
                    <i class="dropdown icon"></i>
                    <div class="menu">
                        <a class="item left-item del-level-two"><i class="trash icon"></i>删除工序模板</a>
                        <a class="item left-item del-level-three"><i class="trash icon"></i>删除工步模板</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <input type="hidden" id="idf-text">
    <div id="preview-two-template" class="hide">
        <!--        <h2 style="margin: 0 auto">工序模板预览</h2>-->
        <table class="ui striped celled table" id="table4">
            <thead>
            <tr></tr>
            <tr></tr>
            </thead>
        </table>
    </div>
    <div class="ui modal add-leave-three-template" id="leave-three-modal">
        <div class="header">添加工步名称</div>
        <i class="close icon"></i>
        <form class="ui form segment" id="three-template-form" onsubmit="return false" autocomplete="off">
            <div class="field">
                <label>模板名称</label>
                <input type="text" id="leaveThreeTemplateName" name="leaveThreeTemplateName">
            </div>
            <div class="field">
                <label>字段名称</label>
                <input type="text" id="fieldName" name="fieldName">
            </div>
            <div class="ui clear-leave-three-template clear button">重置</div>
            <div style="float: right;">
                <div class="ui positive submit button" id="addLeaveThreeTemplate-btn">提交</div>
            </div>
        </form>
    </div>

    <div id="add-template" class="hide">
        <form class="ui form" id="new-template-form" onsubmit="return false" autocomplete="off">
            <div class="header"></div>
            <div class="field">
                <label>模板名称</label>
                <input type="text" id="templateName" name="templateName">
            </div>
            <div class="field templateAlias hide">
                <label>模板表名</label>
                <input type="text" id="templateAlias" name="templateAlias" placeholder="命名规则: xxx_xxx_table">
            </div>
            <div class="field">
                <div class="content" id="sortable">

                </div>
            </div>
            <div class="ui clear-template reset button">重置</div>
            <div style="float: right;">
                <div class="ui positive submit button" id="addTemplate-btn">提交</div>
            </div>
        </form>
    </div>
    <div id="child-template">
        <!--        <div><a class="item"><i class="sync alternate icon"></i></a></div>-->
    </div>

    <!--为编码绑定模板-->
    <div class="ui modal template">
        <div class="header">绑定模板</div>
        <i class="close icon"></i>
        <form class="ui form segment" id="template-form" onsubmit="return false" autocomplete="off">
            <div class="field">
                <label>请填写产品编码</label>
                <input type="text" placeholder="产品编码" name="productCode" id="productCode">
            </div>
            <div class="field">
                <label>请选择模板</label>
                <div class="ui search selection dropdown">
                    <input name="templateId" id="templateId" type="hidden">
                    <div class="default text">请选择模板</div>
                    <i class="dropdown icon"></i>
                    <div class="menu" id="productCode-bind-template-menu">
                    </div>
                </div>
            </div>
            <div class="ui template reset button">重置</div>
            <div style="float: right;">
                <div class="ui positive submit button" id="bind-template-btn">提交</div>
            </div>
        </form>
    </div>
    <!--    接触绑定-->
    <div class="ui modal contact-binding-modal">
        <div class="header">解除绑定</div>
        <i class="close icon"></i>
        <form class="ui form segment" id="contact-binding-form" onsubmit="return false" autocomplete="off">
            <div class="field">
                <label>请选择产品编码</label>
                <div class="ui search selection dropdown">
                    <input name="upProductCodeSo" id="upProductCodeSo" type="hidden">
                    <div class="default text">请选择模板</div>
                    <i class="dropdown icon"></i>
                    <div class="menu" id="product-code-menu-so">

                    </div>
                </div>
            </div>
            <div class="field" id="contactTemplate-input">
                <label>请选择要解除的模板</label>
                <div class="ui search selection dropdown">
                    <input name="contactId" id="contactId" type="hidden">
                    <div class="default text">请选择要解除的模板</div>
                    <i class="dropdown icon"></i>
                    <div class="menu" id="contact-template-menu">
                    </div>
                </div>
            </div>
            <div class="ui contact-bind reset button">重置</div>
            <div style="float: right;">
                <div class="ui positive submit button" id="contact-bind-btn">提交</div>
            </div>
        </form>
    </div>
    <!--    修改绑定-->
    <div class="ui modal update-bind-template">
        <div class="header">修改绑定</div>
        <i class="close icon"></i>
        <form class="ui form segment" id="update-bind-form" onsubmit="return false" autocomplete="off">
            <div class="field">
                <label>请选择产品编码</label>
                <div class="ui search selection dropdown">
                    <input name="upProductCode" id="upProductCode" type="hidden">
                    <div class="default text">请选择模板</div>
                    <i class="dropdown icon"></i>
                    <div class="menu" id="product-code-menu">

                    </div>
                </div>
            </div>
            <div class="field disabled" id="oldTemplate-input">
                <label>请选择要修改的模板</label>
                <div class="ui search selection dropdown">
                    <input name="oldTemplateId" id="oldTemplateId" type="hidden">
                    <div class="default text">请选择要修改的模板</div>
                    <i class="dropdown icon"></i>
                    <div class="menu" id="old-template-menu">
                    </div>
                </div>
            </div>
            <div class="field">
                <label>请选择模板</label>
                <div class="ui search selection dropdown">
                    <input name="newTemplateId" id="newTemplateId" type="hidden">
                    <div class="default text">请选择模板</div>
                    <i class="dropdown icon"></i>
                    <div class="menu" id="template-three-menu">

                    </div>
                </div>
            </div>
            <div class="ui update-bind reset button">重置</div>
            <div style="float: right;">
                <div class="ui positive submit button" id="update-bind-btn">提交</div>
            </div>
        </form>
    </div>

    <!--    返修工单修改绑定-->
    <div class="ui modal re-update-bind-template">
        <div class="header">修改绑定</div>
        <i class="close icon"></i>
        <form class="ui form segment" id="re-update-bind-form" onsubmit="return false" autocomplete="off">
            <div class="field">
                <label>请选择返修工单</label>
                <div class="ui search selection dropdown">
                    <input name="update-reworkOrderNumber" id="update-reworkOrderNumber" type="hidden">
                    <div class="default text">请选择返修工单</div>
                    <i class="dropdown icon"></i>
                    <div class="menu" id="re-code-menu">

                    </div>
                </div>
            </div>
            <div class="field">
                <label>旧模板</label>
                <input type="hidden" id="re-oldTemplateId">
                <input type="text" readonly="readonly" id="re-oldTemplateName">
            </div>
            <div class="field">
                <label>请选择模板</label>
                <div class="ui search selection dropdown">
                    <input name="re-newTemplateId" id="re-newTemplateId" type="hidden">
                    <div class="default text">请选择模板</div>
                    <i class="dropdown icon"></i>
                    <div class="menu" id="re-template-menu">

                    </div>
                </div>
            </div>
            <div class="ui re-update-bind reset button">重置</div>
            <div style="float: right;">
                <div class="ui positive submit button" id="re-update-bind-btn">提交</div>
            </div>
        </form>
    </div>


    <div class="ui modal rework-template">
        <div class="header">绑定模板</div>
        <i class="close icon"></i>
        <form class="ui form segment" id="rework-template-form" onsubmit="return false" autocomplete="off">
            <div class="field">
                <label>请选择返修工单号</label>
                <div class="ui search selection dropdown">
                    <input name="reworkOrderNumber" id="reworkOrderNumber" type="hidden">
                    <div class="default text">请选择返修工单</div>
                    <i class="dropdown icon"></i>
                    <div class="menu" id="rework-order-menu">

                    </div>
                </div>
            </div>
            <div class="field">
                <label>请选择模板</label>
                <div class="ui search selection dropdown">
                    <input name="reworkTemplateId" id="reworkTemplateId" type="hidden">
                    <div class="default text">请选择模板</div>
                    <i class="dropdown icon"></i>
                    <div class="menu" id="template-four-menu">
                    </div>
                </div>
            </div>
            <div class="ui rework-template reset button">重置</div>
            <div style="float: right;">
                <div class="ui positive submit button" id="rework-btn">提交</div>
            </div>
        </form>
    </div>

    <div class="ui modal del-template-modal">
        <div class="header">删除模板</div>
        <i class="close icon"></i>
        <form class="ui form segment" id="del-template-form" onsubmit="return false" autocomplete="off">
            <div class="field">
                <label>请选择要删除的模板</label>
                <div class="ui search selection dropdown">
                    <input name="del-templateId" id="del-templateId" type="hidden">
                    <div class="default text">请选择模板</div>
                    <i class="dropdown icon"></i>
                    <div class="menu" id="del-template-menu">

                    </div>
                </div>
            </div>
            <div class="field">
                <textarea id="del-reason" cols="30" rows="10" style="text-indent: 1em;">

                </textarea>
            </div>
            <div class="ui del-template reset button">重置</div>
            <div style="float: right;">
                <div class="ui positive submit button" id="delTemplate-btn">提交</div>
            </div>
        </form>
    </div>

</div>

<div class="hide" id="template-management">
    <table class="ui selectable striped  celled table" id="table2">
        <thead>
        <tr>
            <th>模板名称</th>
            <th>状态</th>
            <th>创建时间</th>
            <th>作者</th>
            <th>最近一次使用日期</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody>

        </tbody>
    </table>
    <div id="reload" data-tooltip="刷新" data-position="left center">

    </div>
</div>
<div class="ui modal template-modal" style="width:95%;">
    <i class="close icon"></i>
    <table class="ui striped celled table" id="table3">
        <thead>
        <tr>

        </tr>
        <tr>

        </tr>
        <tr>

        </tr>
        </thead>
    </table>
</div>

<script src="../static/js/jquery.min.js" th:src="@{/js/jquery.min.js}"></script>
<script src="../static/dist/semantic.min.js" th:src="@{/dist/semantic.min.js}"></script>
<script src="../static/js/init.js" th:src="@{/js/init.js}"></script>
<script src="../static/js/layui.js" th:src="@{/js/layui.js}"></script>
<script src="../static/js/notiflix.min.js" th:src="@{/js/notiflix.min.js}"></script>
<script src="../static/js/notiflix-aio.min.js" th:src="@{/js/notiflix-aio.min.js}"></script>
<script src="../static/js/public.js" th:src="@{/js/public.js}"></script>
<script src="../static/js/jquery-ui.min.js" th:src="@{/js/jquery-ui.min.js}"></script>
<script src="../static/js/craft.js" th:src="@{/js/craft.js}"></script>
</body>
</html>